<template>
	<div class="ywgzt-container">
		<title-banner title="定时调度"></title-banner>

		<div class="content">
			<div class="timing-box">
				<div v-if="timingId !== 4" class="timing-button-box">
					<el-button
						v-for="item in timingOptions"
						:key="item.timingId"
						class="toggle-button"
						:class="{ 'active-button': timingId == item.timingId }"
						@click="handleToggleTime(item.timingId)"
						>{{ item.name }}</el-button
					>
				</div>
				<div v-if="timingId === 4" class="timing-button-box">
					<el-row class="timing-wrapper" justify="space-between">
						<el-col :span="4" class="box-title-left">
							<!-- <el-icon class="timing-icon-box" size="large" @click="handleToggleTime(1)"><DArrowLeft /></el-icon> -->
							<img class="timing-icon-box" src="~@/assets/icons/png/ops-workbench/back.png" @click="handleToggleTime(1)" />
							<span class="btn-text">添加任务</span>
						</el-col>
						<el-col v-if="active !== 4" :span="3" align="right">
							<el-button type="primary" :disabled="active !== 3" @click="handleSave">保存</el-button>
							<el-button plain @click="cancel">取消</el-button>
						</el-col>
					</el-row>
				</div>
				<div class="current">
					<component :is="currentComponent" ref="task" :taskId="taskId" @changeComponent="handleToggleTime" @changeActive="changeActive"></component>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="TimingSchedule" lang="tsx">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';
import TitleBanner from '@/views/ops-workbench/components/TitleBanner/index.vue';
import operateMonitor from './operateMonitor/index.vue';
import taskManagement from './taskManagement/index.vue';
import globalSetting from './globalSetting/index.vue';
import addTask from './taskManagement/addTask.vue';
const { proxy } = useCurrentInstance();
const router = useRouter();
const route = useRoute();

let currentComponent = ref<any>(taskManagement);
let task = ref();
console.log(task, ' task');
// 分区按钮参数
let timingOptions = reactive([
	{ timingId: 1, name: '任务管理' },
	{ timingId: 2, name: '运行监控' },
	{ timingId: 3, name: '全局设置' },
]);
let timingId = ref(1);
let taskId = ref(0);
let active = ref(0);
handleToggleTime(1);
// 切换分区按钮
function handleSave() {
	task.value.save();
}
// 取消
function cancel() {
	handleToggleTime(1);
}
function handleToggleTime(value: number, query?: anyObj) {
	timingId.value = value;
	console.log(value, query);
	handleSelectChange();
	if (query) {
		taskId.value = query.taskId;
		console.log(taskId.value, '有taskID');
	}
}

function changeActive(value: number) {
	active.value = value;
}
function handleSelectChange() {
	if (timingId.value === 1) {
		currentComponent.value = taskManagement;
	} else if (timingId.value === 2) {
		currentComponent.value = operateMonitor;
	} else if (timingId.value === 3) {
		currentComponent.value = globalSetting;
	} else if (timingId.value === 4) {
		currentComponent.value = addTask;
	}
}
</script>
<style lang="scss">
@import '/src/styles/ops-workbench/common.scss';
@import '/src/styles/ops-workbench/yd-table.scss';
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.ywgzt-container {
	min-width: 1440px;
	padding: 20px;
	min-height: 100vh !important;
}
.timing-button-box {
	padding: 10px 0;
	.timing-wrapper {
		padding-bottom: 10px;
		.box-title-left {
			display: flex;
			align-items: center;
		}
		.timing-icon-box {
			margin-right: 10px;
			cursor: pointer;
		}
		.btn-text {
			font-size: 16px;
		}
	}
}
.toggle-button {
	color: #ffffff;
	font-size: 15px;
	text-align: center;
	padding: 5px;
	background: none;
	border: none;
	&:hover {
		border: 1px solid #2abcca;
	}
}
.active-button {
	border: 1px solid #2abcca;
	background: #2abcca;
	background: -moz-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
	background: -webkit-linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
	background: linear-gradient(top, rgba(43, 237, 237, 0.1) 0%, rgba(43, 237, 237, 0.5) 100%);
}
</style>
